<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            li {
                width: 200px;
                height: 35px;
                border: 2px solid black;
            }

    


        </style>
    </head>
    <body>

        <div>
            <p></p>
        </div>
        <p></p>

        <p id="test">hello, 大家好</p>

        <ul>
            <li lang="en">内容</li>
            <li>内容hello</li>
            <li class="red">内容</li>
            <li>内容</li>
            <li>内容</li>
        </ul>

        <button id="btn">按钮</button>
        
        <input type="text">
        <!-- br*50 -->

        <a id="a" href="#test">跳到test p标签</a>

        <!-- <input type="text" disabled> -->

        <div id="cb">
            黄瓜<input type="checkbox"><br>
            菠菜<input type="checkbox"><br>
            香蕉<input type="checkbox"><br>
            橘子<input type="checkbox"><br>
            苹果<input type="checkbox"><br>
            西瓜<input type="checkbox"><br>
            冬瓜<input type="checkbox"><br>
            <button id="selectAll">全选</button>
            <button id="selectBack">反选</button>
        </div>

        <div class=".box">box</div>
    </body>
</html>
<script src="jquery.min.js"></script>
<script>
    // $('ul>li:first').css('background', 'red');
    // $('ul>li:not(.red)').css('background', 'blue');
    // $('ul>li:even').css('background', 'orange');
    // $('ul>li:odd').css('background', 'orange');
    // $('ul>li:eq(1)').css('background', 'orange');
    // $('ul>li:gt(1)').css('background', 'orange');
    // $('ul>li:lt(2)').css('background', 'orange');

    // $('ul>li:lang(en)').css('background', 'blue');

    // $('ul>li:first').animate({width: "+=100"}, 5000);
    // $('#btn').click(function() {
    //     // $('ul>li:not(:animated)').css('background', 'red');
    //     $('input').focus();
    //     $(':focus').css('background', 'red');
    // });


    // $('#a').click(function() {
    //     $(":target").css('color', 'blue');
    // });

    // $('ul>li:contains(hello)').css('color', 'blue');


    // $(':empty').remove();

    // 选中有子元素或文本的div
    // $('div:parent')

    // n从0开始，递增
    // $('ul>li:nth-child(n+2)').css('background', 'red');
    // $('ul>li:nth-child(2n+1)').css('background', 'red');
    // $('ul>li:nth-child(2n)').css('background', 'red');

    // $('ul>li:nth-child(-n+3)').css('background', 'red');
    // $('ul>li:nth-last-child(-n+3)').css('background', 'red');
    // $('ul>li:nth-last-child(1)').css('background', 'red');

    // $(':button').css('background', 'red');

    $('#selectAll').click(function() {
        $('#cb>:checkbox').prop('checked', true);
    });

    $('#selectBack').click(function() {

        var selected = $('#cb>:checked');
        var diselected = $('#cb>:not(:checked)');
        selected.prop('checked', false);
        diselected.prop('checked', true);

    });


    $('.' +  $.escapeSelector( ".box" )).css('background', 'red');


</script>